<template>
 <footer class="footer" v-if="list.length > 0">
        <span class="todo-count"><strong>{{leftCount}}</strong> item left</span>
        <ul class="filters">
          <li>
            <a  href="#/" 
            @click.prevent="filter('all')"
             :class="{selected:type==='all'}"
            >
            All</a>
          </li>
          <li>
            <a href="#/active" 
            @click.prevent="filter('active')"
             :class="{selected : type==='active'}"
            >Active</a>
          </li>
          <li>
            <a href="#/completed" 
            @click.prevent="filter('completed')"
            :class="{selected : type==='completed'}"
            >
            Completed
            </a>
          </li>
        </ul>
        <button v-show="isShowClear" 
        class="clear-completed"
        @click="clear"
        >
        Clear completed</button>
 </footer>
</template>

<script>
export default {
  props :{
    list: {
      type:Array,
      required: true,

    },
    type: {
      type:String,
       default: 'all',
    }
  },
computed : {
  leftCount() {
    const arr=this.list.filter(item => !item.isDone)
    return arr.length
  },
  isShowClear() {
    return this.list.some(item=> item.isDone)
  }
},
methods: {
  clear () {
     this.$emit('clear')
  },
  filter(type) {
    this.$emit('filter',type)
  }
}
}
</script>

<style>

</style>